<!--
 * @Autor: Gct
 * @Description: 资讯评论页面
 * @Date: 2022-04-13 21:18:06
 * @LastEditors: Gct
 * @LastEditTime: 2022-04-15 15:22:33
-->
<template>
  <div>
    <!-- 第一行开始 -->
    <el-button @click="deleteByIds()" type="danger" round>批量删除</el-button>
    <!-- 第一行结束 -->
    <!-- 第二行开始 -->
    <!-- 表格开始 -->
    <div>
      <el-table
        :data="commentList"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column type="index" :index="1" label="序号" width="120">
        </el-table-column>
        <el-table-column prop="comment" label="评论内容"></el-table-column>
        <el-table-column prop="userId" label="评论人编号"></el-table-column>
        <el-table-column prop="articleId" label="资讯编号"></el-table-column>
        <el-table-column prop="commentTime" label="评论时间">
          <template slot-scope="scope">
            {{ scope.row.commentTime | fmtDate }}
          </template>
        </el-table-column>
        <el-table-column prop="status" label="评论状态">
          <template slot-scope="scope">
            <el-tag type="success" v-if="scope.row.status === '通过'">{{
              scope.row.status
            }}</el-tag>
            <el-tag type="danger" v-else-if="scope.row.status === '不通过'">{{
              scope.row.status
            }}</el-tag>
            <el-tag type="info" v-else>{{ scope.row.status }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="text">删除</el-button>
            <el-button
              @click="toChangeStatus(scope.row.id, '通过')"
              type="text"
              v-if="scope.row.status === '未审核'"
              >通过</el-button
            >
            <el-button
              @click="toChangeStatus(scope.row.id, '不通过')"
              type="text"
              v-if="scope.row.status === '未审核'"
              >不通过</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 表格结束 -->
    <!-- 第二行结束 -->
  </div>
</template>
<script>
import { pageQuery, batchDelete, deleteById, check } from "@/api/comment.js";
export default {
  data() {
    return {
      //  资讯评论的数据
      commentList: [],
      params: {
        page: 1,
        pageSize: 10,
      },
      // 批量删除数组
      ids: [],
    };
  },
  created() {
    this.findAllComments();
  },
  methods: {
    /**
     * @description: 处理多选框表格的函数
     * @param {*}
     * @return {*}
     * @author: Gct
     */
    handleSelectionChange(val) {
      this.ids = val.map((item) => {
        return item.id;
      });
    },

    /**
     * @description: 分页展示所有评论
     * @param {*}
     * @return {*}
     * @author: Gct
     */
    async findAllComments() {
      let res = await pageQuery(this.params);
      // console.log(res);
      this.commentList = res.data.list;
      this.total = res.data.total;
    },

    /**
     * @description: 批量删除请求
     * @param {*}
     * @return {*}
     * @author: Gct
     */
    deleteByIds() {
      if (this.ids.length > 0) {
        this.$confirm("此操作将永久删除评论, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(async () => {
            let res = await batchDelete({ ids: this.ids });
            this.$message({
              type: "success",
              message: res.message,
            });
            // 重载数据
            this.findAllComments();
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
      }
    },

    /**
     * @description: 审核评论
     * @param {*}
     * @return {*}
     * @author: Gct
     */
    async toChangeStatus(id, status) {
      let res = await check({ id, status });
      this.$message({
        type: "success",
        message: res.message,
      });
      this.findAllComments();
    },
  },
};
</script>